<template>
    <div>
        <a-modal width="1000px" :visible="visible" :title="null" @cancel="closeModal" class="large-modal right1Child-modal"
            :getContainer="getParent" :footer="null" :dialog-style="{ top: '0' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div style="position:relative">
                    <div class="child-title">
                        <span class="child-title-words">用户画像</span>
                    </div>
                    <div class="total-count">
                        <div class="child-content-title">
                            <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                            当前就诊患者总人数
                        </div>
                        <div class="num-box">
                            <div class="num-list" v-for="(item,idx) in numList" :key="'num_'+idx">
                                <img class="num-list-bg" src="@/assets/large/left2-numbg.png" v-if="item!==','" />
                                <div class="num-list-word">{{item}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="charts-box">
                        <div class="charts-list">
                            <div class="child-content-title">
                                <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                患者年龄占比
                            </div>
                            <div id="right1ChildYear"></div>
                        </div>

                        <div class="charts-list">
                            <div class="child-content-title">
                                <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                患者性别占比
                            </div>
                            <div class="right1Child-sex">
                                <div class="sex-list" style="margin-bottom:30px">
                                    <img class="sex-img" src="@/assets/large/men.png" />
                                    <span class="sex-type" style="color:#5AA7F6">男性</span>
                                    <div class="sex-num"
                                        style="background: linear-gradient(to bottom, #fff 0%,#fff 50%, #0D91FF 100%);background-clip:text">
                                        <NumberAnimation :num="genderStats.femaleCount" :decimal="0" />
                                    </div>
                                    <span class="sex-unit">人</span>
                                    <span class="sex-per"
                                        style="background: linear-gradient(to bottom, #fff 0%,#fff 50%, #0D91FF 100%);background-clip:text">{{genderStats.femalePercentage}}%</span>

                                </div>
                                <div class="sex-list">
                                    <img class="sex-img" src="@/assets/large/women.png" />
                                    <span class="sex-type" style="color:#F55A81">女性</span>
                                    <div class="sex-num"
                                        style="background: linear-gradient(to bottom, #fff 0%,#fff 50%, #F55A81 100%);background-clip:text">
                                        <NumberAnimation :num="genderStats.maleCount" :decimal="0" />
                                    </div>
                                    <span class="sex-unit">人</span>
                                    <span class="sex-per"
                                        style="background: linear-gradient(to bottom, #fff 0%,#fff 50%, #F55A81 100%);background-clip:text">{{genderStats.malePercentage}}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="charts-list">
                            <Right1child1Vue :pageData="departmentStats"/>
                        </div>
                        <div class="charts-list">
                            <Right1child2Vue :pageData="userStatics"/>
                        </div>

                    </div>

                </div>
            </a-spin>
            <template slot="footer">
                <div></div>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import largeApi from "@/api/largeApi";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import Right1child1Vue from "./right1child1.vue";
import Right1child2Vue from "./right1child2.vue";
@Component({
    name: "tpl",
    components: {Right1child1Vue,Right1child2Vue},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: ()=>{} }) userStatics!: any;
    
    dataList: any[] = [];
    loading = false;
    getParent() {
        return document.getElementById("largePage");
    }

    async mounted() {
        await this.getPageData()
         this.setChart();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    genderStats={}
    departmentStats={}
    async getPageData() {
        this.loading = true;
        try {
            const res = await largeApi.getUserAnalysisDetails({});
            this.dataList=res.data.ageStats.ageStatistics.map(item=>({
                name:item.ageRange,
                val:item.count
            }))
            this.numList = this.getNumList(res.data.totalPatients);
            this.genderStats=res.data.genderStats
            this.departmentStats=res.data.departmentStats.departmentStatistics
           
        } finally {
            this.loading = false;
        }
    }

    numList: string[] = [];
    getNumList(num) {
        const str = Number(num).toLocaleString();
        return str.split("");
    }

    chart: any = null;
    maxData=0
    setChart() {
        let max = 0;
        this.dataList.forEach((item) => {
            const val = Number(item.val);
            if (val > max) max = val;
        });
        this.maxData = Number(max + max * 0.1);
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        options.radar = this.getRadar();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("right1ChildYear");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 100,
                bottom: 100,
            },
            radar: this.getRadar(),
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getRadar() {
        return {
            // shape: 'circle',
            startAngle: "60",
            radius: "60%",
            axisName: {
                formatter: function (value, indicator) {
                    return `{val|${indicator.val}人}\n{title|${value}}`;
                },
                rich: {
                    title: {
                        color: "#fff",
                        fontSize: 12,
                        lineHeight: 15,
                    },
                    val: {
                        color: "#00C6E1",
                        fontSize: 14,
                        fontWeight: "bold",
                        lineHeight: 15,
                    },
                },
            },
            indicator: this.dataList.map((item) => {
                return { name: item.name, max: this.maxData, val: item.val };
            }),
            axisLine: {
                lineStyle: {
                    color: "rgba(200, 200, 200, 0.2)", // 坐标轴线颜色
                },
            },
            axisLabel: {
                color: "rgba(200, 200, 200, 0.5)", // 坐标轴标签颜色
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(200, 200, 200, 0.2)", // 分割线颜色
                },
            },
            splitArea: {
                areaStyle: {
                    color: ["rgba(0, 224, 255, 0.2)", "rgba(0, 224, 255, 0.3)"],
                },
            },
        };
    }
    getSeries() {
        return [
            {
                name: "科技成果",
                type: "radar",
                areaStyle: {
                    color: "rgba(0, 224, 255, 0.8)", // 修改填充颜色
                },
                lineStyle: {
                    color: "rgba(255, 255, 255, 0)", // 线条颜色
                    width: 1,
                },
                itemStyle: {
                    opacity: 0,
                },
                data: [{ value: this.dataList.map((item) => item.val) }],
            },
        ];
    }
}
</script>
<style lang="scss">
.right1Child-modal {
    .ant-modal-body {
        max-height: calc(100vh - 50px);
    }
    .total-count {
        margin-top: 20px;
    }

    .num-box {
        font-weight: bold;
        font-size: 45px;
        color: #fff;
        margin-top: 10px;
        padding-left: 20px;
    }
    .num-list {
        display: inline-block;
        position: relative;
        height: 60px;
        min-width: 20px;
        margin-right: 1px;
    }
    .num-list-bg {
        height: 110%;
        display: block;
    }
    .num-list-word {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
    }

    #right1ChildYear {
        width: 100%;
        height: 200px;
    }
    .right1Child-sex {
        width: 100%;
        margin-top: 30px;
    }
    .sex-list {
        vertical-align: bottom;
    }
    .sex-num {
        display: inline-block;
        background-clip: text;
        color: transparent;
        font-size: 34px;
        font-weight: bold;
        margin-left: 30px;
        vertical-align: bottom;
        transform: translateY(6px);
    }
    .sex-img {
        width: 50px;
        vertical-align: bottom;
    }
    .sex-per {
        display: inline-block;
        background-clip: text;
        color: transparent;
        font-size: 26px;
        font-weight: bold;
        vertical-align: bottom;
        transform: translateY(1px);
    }
    .sex-type {
        font-weight: bold;
        font-size: 22px;
        vertical-align: bottom;
    }
    .sex-unit {
        color: #fff;
        font-size: 16px;
        margin: 0 30px 0 10px;
        vertical-align: bottom;
        display: inline-block;
        transform: translateY(-4px);
    }

    .charts-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .charts-list {
        width: 50%;
        height: 250px;
    }
}
</style>
